<template>
  <div class="theme-demo">
    <h1>主题切换演示</h1>
    <p>点击右上角的主题切换按钮来体验暗黑模式切换动画效果。</p>

    <div class="demo-cards">
      <el-card class="demo-card">
        <template #header>
          <span>Element Plus 卡片</span>
        </template>
        <p>这是一个 Element Plus 卡片组件，会根据主题自动调整样式。</p>
        <el-button type="primary"> 主要按钮 </el-button>
        <el-button>默认按钮</el-button>
      </el-card>

      <a-card class="demo-card" title="Ant Design Vue 卡片">
        <p>这是一个 Ant Design Vue 卡片组件，同样支持主题切换。</p>
        <a-button type="primary"> 主要按钮 </a-button>
        <a-button>默认按钮</a-button>
      </a-card>
    </div>

    <div class="demo-form">
      <h2>表单组件演示</h2>
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const form = reactive({
  username: '',
  email: '',
  description: '',
});
</script>

<style scoped>
.theme-demo {
  padding: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.theme-demo h1 {
  color: var(--text-color);
  margin-bottom: 16px;
}

.theme-demo h2 {
  color: var(--text-color);
  margin: 32px 0 16px 0;
}

.theme-demo p {
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 24px;
}

.demo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.demo-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.demo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-color);
}

.demo-form {
  background: var(--card-bg);
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 12px var(--shadow-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .theme-demo {
    padding: 16px;
  }

  .demo-cards {
    grid-template-columns: 1fr;
  }

  .demo-form {
    padding: 16px;
  }
}
</style>
